<template>
  <div class="dashboard-container">

    <el-button
        size="mini"
        @click="open({})">新增
    </el-button>

    <div v-show="showBox" class="Box">
      <div style="margin:10px 0;">问题编号:</div> <el-input v-model="BoxData.question" placeholder="请输入内容"></el-input>
      <div style="margin:10px 0;">选项A:</div> <el-input v-model="BoxData.optionA" placeholder="请输入内容"></el-input>
      <div style="margin:10px 0;">选项B:</div> <el-input v-model="BoxData.optionB" placeholder="请输入内容"></el-input>
      答案: <el-select v-model="BoxData.answer" placeholder="请选择" style="margin-top:20px;">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-button
        size="mini"
        type="danger"
        style="float:right;margin-left:20px;margin-top:30px;"
        @click="close">取消</el-button>
      <el-button
        size="mini"
        style="float:right;margin-top:30px;"
        @click="add()">保存</el-button>
    </div>

    <el-table
      :data="listData"
      style="width: 100%">
      <el-table-column
        prop="aq_id"
        label="问题编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="question"
        label="问题"
        width="180">
      </el-table-column>
      <el-table-column
        prop="answer"
        label="答案"
        width="180">
      </el-table-column>
      <el-table-column
        prop="answers"
        label="选项"
        width="180">
      </el-table-column>
      <el-table-column
        prop="create_time"
        label="创建时间"
        width="180">
      </el-table-column>
      <el-table-column 
        fixed="right"
        label="操作"
        width="200">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="Delete(scope.row.aq_id,scope.$index)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {getAqs,deleteAq,createAq} from '../../api/static'

export default {
  name: 'Dashboard',
  data(){
    return {
      listData:[],
      showBox:false,
      BoxData:{},

      options: [{
        value: '0',
        label: 'A'
      }, {
        value: '1',
        label: 'B'
      }],
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  created(){
    getAqs().then(res=>{
      console.log(res.data)
      res.data.map(item=>{
        item.answers=item.answers.join(',')
      })
      this.listData = res.data
    })
  },
  methods: {
      Delete(aq_id,index) {
        deleteAq(aq_id).then(res=>{
          this.listData.splice(index,1)
        })
      },
      open(data,index){
        this.showBox = true
      },
      close(){
        this.showBox = false
        this.BoxData = {}
        
        getAqs().then(res=>{
          console.log(res.data)
          res.data.map(item=>{
            item.answers=item.answers.join(',')
          })
          this.listData = res.data
        })
      },
      
      add(){
        createAq(this.BoxData.question,this.BoxData.answer,this.BoxData.optionA+','+this.BoxData.optionB).then(res=>{
          this.close()
          this.BoxData = {}
        })
      },
    }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.Box{
  padding: 20px;
  position: fixed;
  z-index: 999;
  width: 500px;
  height: 360px;
  background: rgb(249, 249, 249);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border-radius: 20px;
  box-shadow:2px 2px 2px 2px rgb(161, 161, 161);
}
</style>
